<template>
  <view
    class="address-item ss-flex ss-row-between ss-col-center"
    :class="[{ 'border-bottom': props.hasBorderBottom }]"
  >
    <view class="item-left" v-if="!isEmpty(props.item)">
      <view class="area-text ss-flex ss-col-center">
        <uni-tag
          class="ss-m-r-10"
          size="small"
          custom-style="background-color: var(--ui-BG-Main); border-color: var(--ui-BG-Main); color: #fff;"
          v-if="props.item.is_default"
          text="默认"
        ></uni-tag>
        {{ props.item.province_name }} {{ props.item.city_name }} {{ props.item.district_name }}
      </view>
      <view class="address-text">{{ props.item.address }}</view>
      <view class="person-text">{{ props.item.consignee }} {{ props.item.mobile }}</view>
    </view>
    <view v-else><view class="address-text ss-m-b-10">请选择收货地址</view></view>
    <slot>
      <view class="edit-btn-info">
        <view>
			<view class="flex-box" @tap.stop="onEdit">
				<view class="flex-box mr30">
					<image :src="state.edit" mode="widthFix" class="edit-img"></image>
					<view class="ml10">编辑</view>
				</view>
			<!-- 	<view class="flex-box" @click.stop="handleDelete(props.item)">
					<image :src="state.deleteImg" mode="widthFix" class="edit-img"></image>
					<view class="ml10">删除</view>
				</view> -->
			</view>
			
          <!-- <image :src="sheep.$url.static('/assets/addons/shopro/uniapp/user/address/edit.png')"></image> -->
        </view>
      </view>
	  <view>
		  
	  </view>
    </slot>
	
  </view>
 
</template>

<script setup>
  /**
   * 基础组件 - 地址卡片
   *
   * @param {String}  icon = _icon-edit    - icon
   *
   * @event {Function()} click			 - 点击
   * @event {Function()} actionClick		 - 点击工具栏
   *
   * @slot 								 - 默认插槽
   */
  import sheep from '@/sheep';
   import { reactive, onBeforeMount } from 'vue';
  import { isEmpty } from 'lodash';
  const props = defineProps({
    item: {
      type: Object,
      default() {},
    },
    hasBorderBottom: {
      type: Boolean,
      defult: true,
    },
  });
	const state=reactive({
		edit:'https://wemayshiguang.oss-cn-shanghai.aliyuncs.com/edit.png',
		deleteImg:'https://wemayshiguang.oss-cn-shanghai.aliyuncs.com/delete.png',
	})
	const handleDelete=(item)=>{
		
		let id=JSON.stringify(item.id)
		console.log('item',item,id)
		uni.showModal({
		  title: '提示',
		  content: '确认删除此收货地址吗？',
		  success: async function (res) {
		    if (res.confirm) {
		      const { code } = await sheep.$api.user.address.delete(id);
		      if (res.code === 1) {
		        // sheep.$router.back();
				
		      }
		    }
		  },
		});
	}
  const onEdit = () => {
    sheep.$router.go('/pages/user/address/edit', {
      id: props.item.id,
    });
  };
</script>

<style lang="scss" scoped>
  .address-item {
    padding: 24rpx 30rpx;

    .item-left {
      width:80%;
    }
	.mr30{
		margin-right:30rpx;
	}
    .area-text {
      font-size: 26rpx;
      font-weight: 400;
      color: $dark-9;
    }

    .address-text {
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
      line-height: 48rpx;
    }

    .person-text {
      font-size: 28rpx;
      font-weight: 400;
      color: $dark-9;
    }
  }

  .edit-btn {
	 
    // height: 44rpx;
    // background: $gray-f;
    // border-radius: 50%;

    .edit-icon {
      width: 24rpx;
      height: 24rpx;
    }
  }
  image {
    width: 100%;
    height: 100%;
  }
  .flex-box{
	  
	  display: flex;
	  align-items:center;
	  justify-content:space-between;
	white-space:nowrap;
  }
  .edit-btn-info{
	  
	  
  }
  .ml10{
	  font-size:26rpx !important;
  }
  .edit-img{
	  width:30rpx;
	  height:30rpx;
	  margin-right:10rpx;
  }
</style>
